<template>
  <div>
    <div
      class="tab-item-content"
      @click="handleClick(item)"
      v-for="item in list"
      :key="item.name"
    >
      <div class="left">
        <img :src="avatar" alt="" />
      </div>
      <div class="right">
        <template v-if="tabName === 'linkman'">
          <div class="right-first">
            <div v-html="renderHighlightStr(item.linkmanName)"></div>
          </div>
          <div class="right-second">{{ item.customerName }}</div>
        </template>
        <template v-else-if="tabName === 'imMessage'">
          <div class="right-first">
            <span>{{ item.titleName }}</span>
            <span class="right-second">
              {{ formatTime(item.createTime) }}
            </span>
          </div>
          <div class="right-second">
            <div v-html="renderHighlightStr(item.messageContent.msg)"></div>
          </div>
        </template>
        <template v-else>
          <div class="right-first">
            <div v-html="renderHighlightStr(item.customerName)"></div>
          </div>
          <div class="right-second">{{ `${$t('common.base.phone')}：${item.phone}` }}</div>
          <div class="right-second">{{ `${$t('common.base.serialNumber')}：${item.serialNumber}` }}</div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { getOssUrl } from '@src/util/assets'
const DEFAULT_AVATAR = getOssUrl('/im/head_customer.png');
import moment from 'moment';


export default {
  data() {
    return {
      avatar: DEFAULT_AVATAR,
    };
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    tabName: {
      type: String,
      default: '',
    },
    keywords: {
      type: String,
      default: '',
    },
  },
  emits: ['updateList'],
  methods: {
    formatTime(value) {
      if (!value) return '';

      return moment(value).format('YYYY-MM-DD HH:mm:ss');
    },
    handleClick(item) {
      this.$emit('updateList', item);
    },
    renderHighlightStr(str) {
      if (!str) return '';

      const reg = new RegExp(this.keywords, 'ig');
      return str.replace(reg, val => {
        return `<span style="color: ${this.getThemeColor};">${val}</span>`;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tab-item-content {
  display: flex;
  padding: 4px 16px 6px;
  background: #ffffff;
  cursor: pointer;

  .left {
    width: 48px;
    height: 48px;
    margin-right: 6px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;

    img {
      width: 40px;
      height: 40px;
    }
  }

  .right {
    display: flex;
    flex-direction: column;
    width: calc(100% - 72px);

    &-first {
      font-size: 17px;
      color: #051a13;
      display: flex;
      justify-content: space-between;
    }

    &-second {
      font-size: 14px;
      color: rgba(5, 26, 19, 0.4);

      div {
        @include text-ellipsis;
      }
    }
  }
}
</style>
